<template>
    <section class="table-common">
        <el-table
        	 v-loading="loading"
            :data="tableData"
            stripe
            style="width: 100%"
            :header-cell-style="{background:'#cae4fe',color: '#000'}"
            :cell-style="{border:'none'}"
            >
		 	<el-table-column
				 label="序号"
				 align="center"
                 width="80px"
			      >
			      	<template slot-scope="scope">
				        <span style="margin-left: 10px">{{ scope.$index+1}}</span>
				    </template>
		    </el-table-column>
		    <el-table-column
		    	align="center"
		        v-for = "(val,key) in tableLabel"
		        :prop="key"
		        :label="val"
                :show-overflow-tooltip="true"
		    >
		    </el-table-column>
		    <el-table-column
                align="center"
                label="操作"
                width="210"
                >
		      	<template slot-scope="scope">
			        <span v-if="currentType!='serverRegister'"  
                        v-show="!scope.row.qiYong" 
                        class="button-click" 
                        @click="scope.row.qiYong = !scope.row.qiYong">
			        	<img src="../../../images/server01.png"/>
			        </span>
			        <span v-if="currentType!='serverRegister'"  
                        v-show="scope.row.qiYong" 
                        class="button-click" 
                        @click="scope.row.qiYong = !scope.row.qiYong">
			        	<img src="../../../images/server05.png"/>
			        </span>
			        <span class="pushServer button-click "  
                        v-if="currentType==='serverRegister'" 
                        @click="pushServer(scope)">
                        发布服务
                    </span>
			        <span 
                        class="button-click" 
                        @click="edit(scope)" >
                        <img src="../../../images/server02.png"/>
                    </span>
			        <span 
                        class="button-click"  
                        @click="detail(scope)">
                        <img src="../../../images/server03.png"/>
                    </span>
			        <span 
                        class="button-click" 
                        @click="del(scope)">
                        <img src="../../../images/server04.png"/>
                    </span>
			    </template>
		    </el-table-column>
        </el-table>
        <p style="text-align: right;margin-top: 20px;">
        	<el-pagination
			  background
			   @current-change="handleCurrentChange"
			  layout="prev, pager, next"
			  :total="total">
			</el-pagination>
        </p>
    </section>
</template>

<script>
    import server01 from "../../../images/server01.png";
    export default {
    	props:{
    		loading:Boolean,
    		currentType:{
    			type: String,
    			default: 'shareServer',
    			required: false
    		},
    		total:Number,
    		tableData:Array,
    		tableLabel:Object,
    	},
        data() {
          return {
          	
          };
        },
        methods: {
            show(scope){
            	console.log(scope);
            },
            del(scope){
                this.$emit("del",scope);
            },
            edit(scope){
            	this.$emit("edit",scope);
            },
            detail(scope){
            	this.$emit("detail" ,scope);
            },
            pushServer(scope){
            	this.$emit("pushServer",scope);
            },
            handleCurrentChange(val){
            	this.$emit("handleCurrentChange",val)
            }
        }
  };
</script>

<style scoped="scoped">
    .pushServer{
    	    vertical-align: super;
		    background: #409EFF;
		    display: inline-block;
		    color: #fff;
		    padding: 1px 5px;
		    cursor: pointer;
		    border-radius: 4px;
    }
</style>